<template>
	<view class="parts-detail">
		<view class="parts-items" v-if="partsDetail.length > 0">
			<view class="parts-item" v-for="(item, index) in partsDetail" :key="index">
				<view class="word-title">{{item.name}}</view>
				<view class="word-desc">作用：{{ item.function }}</view>
				<view class="word-desc">好处：{{ item.benefits }}</view>
				<view class="word-desc">切入点：{{ item.care }}</view>
			</view>
		</view>

		<view class="no-data-tips" v-else>暂无数据</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				partsDetail: [],
			}
		},
		mounted() {
			const idx = uni.getStorageSync("partsDetailId");
			if (idx === 0) {
				uni.setNavigationBarTitle({
					title: "重点检查项"
				})
			} else if (idx === 1) {
				uni.setNavigationBarTitle({
					title: "待更换KV件"
				})
			} else {
				uni.setNavigationBarTitle({
					title: "留存问题"
				})
			}
			const partsDetail = uni.getStorageSync("partsDetail");
			this.partsDetail = partsDetail;
		},
		methods: {

		}
	}
</script>

<style lang="less" scoped>
	.parts-detail {
		background-image: url('../../static/byd-img/jiaoji@1x.png');
		background-repeat: no-repeat;
		/* 将背景图位置设置为顶部居中 */
		background-position: top center; 
		/* 根据不同宽度适配图片宽 */
		background-size: contain; 
		.parts-items {
			.parts-item {
				background-color: #fff;
				margin: 0 24rpx 24rpx 24rpx;
				padding: 24rpx;
				border-radius: 16rpx;
				box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.15);

				.word-title {
					font-size: 32rpx;
					color: #1D2129;
					display: flex;
					align-items: center;
					font-weight: bold;

					&::before {
						display: inline-block;
						content: "";
						width: 8rpx;
						height: 24rpx;
						background-color: #0063FF;
						margin-right: 16rpx;
						border-radius: 8rpx;
					}
				}

				.word-desc {
					font-size: 28rpx;
					color: #4E5969;
					margin-top: 24rpx;
				}
			}
		}

		.no-data-tips {
			position: fixed;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			font-size: 28rpx;
			color: #ccc;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
</style>